'use client'

import { useParameterPermissions } from '@/hooks/use-parameter-permissions'
import { useAuth } from '@/hooks/use-auth'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

export default function DebugFieldsPage() {
  const { user } = useAuth()
  const {
    fields,
    loading,
    error,
    getFieldsByDataSource,
    getUserDataSources
  } = useParameterPermissions('table_c2', 1)

  if (loading) {
    return <div className="p-8">加载中...</div>
  }

  if (error) {
    return <div className="p-8 text-red-600">错误: {error}</div>
  }

  const allDataSources = ['P', 'E', 'M', 'O', 'C', 'R']
  const userDataSources = getUserDataSources()

  return (
    <div className="p-8 space-y-6">
      <h1 className="text-2xl font-bold">字段调试页面</h1>
      
      {/* 用户信息 */}
      <Card>
        <CardHeader>
          <CardTitle>用户信息</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            <p><strong>用户:</strong> {user?.full_name} ({user?.username})</p>
            <p><strong>角色:</strong> {user?.role_name} ({user?.role_code})</p>
            <p><strong>用户数据来源:</strong> {userDataSources.join(', ')}</p>
          </div>
        </CardContent>
      </Card>

      {/* 总字段统计 */}
      <Card>
        <CardHeader>
          <CardTitle>字段统计</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            <p><strong>总字段数:</strong> {fields.length}</p>
            <p><strong>可见字段数:</strong> {fields.filter(f => f.isVisible).length}</p>
            <p><strong>可编辑字段数:</strong> {fields.filter(f => f.canEdit).length}</p>
          </div>
        </CardContent>
      </Card>

      {/* 按数据来源分组 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {allDataSources.map(source => {
          const sourceFields = getFieldsByDataSource(source)
          const visibleFields = sourceFields.filter(f => f.isVisible)
          const editableFields = sourceFields.filter(f => f.canEdit)
          
          return (
            <Card key={source}>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Badge variant="outline">{source}</Badge>
                  <span>数据来源</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <p><strong>总字段:</strong> {sourceFields.length}</p>
                  <p><strong>可见字段:</strong> {visibleFields.length}</p>
                  <p><strong>可编辑字段:</strong> {editableFields.length}</p>
                  
                  {visibleFields.length > 0 && (
                    <div className="mt-4">
                      <p className="font-medium mb-2">字段列表:</p>
                      <div className="space-y-1">
                        {visibleFields.map(field => (
                          <div key={field.id} className="text-sm">
                            <span className="font-medium">{field.field_name}</span>
                            {field.canEdit ? (
                              <Badge variant="default" className="ml-2 text-xs">可编辑</Badge>
                            ) : (
                              <Badge variant="secondary" className="ml-2 text-xs">只读</Badge>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

      {/* 原始数据 */}
      <Card>
        <CardHeader>
          <CardTitle>原始字段数据</CardTitle>
        </CardHeader>
        <CardContent>
          <pre className="text-xs bg-gray-100 p-4 rounded overflow-auto max-h-96">
            {JSON.stringify(fields.map(f => ({
              id: f.id,
              name: f.field_name,
              source: f.data_source,
              visible: f.isVisible,
              editable: f.canEdit
            })), null, 2)}
          </pre>
        </CardContent>
      </Card>
    </div>
  )
}
